<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
          <template #default="{ filterForm, handleQuery }">
            <el-col :span="4" style="text-align: right">
              <el-form-item label="装置名称">
                <el-input v-model="filterForm.deviceName"></el-input>
              </el-form-item>
            </el-col>
          </template>
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :useAction="false"
          :options="options.table"
          @rowClick="rowClick"
          :usePage="true"
          :rowClassName="rowClassName"
        >
          <template #beforepointInfo>
            <el-table-column
              label="实时数值"
              prop="av"
              align="center"
              width="200"
              key="av"
            >
              <template #default="{ row }">
                <div @click.stop="handleHis(row)">
                  <el-button type="text">
                    {{ row.av }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </template>
        </Table>
      </el-col>
    </el-row>
    <el-dialog v-model="outerVisible" width="40%">
      <template #default>
        <Card :title="detailRow.deviceName">
          <div class="card__body">
            <div class="tank">
              <img class="img" :src="tankImg" alt="" />
              <!-- <Jdt class="jdt"></Jdt> -->
            </div>
            <div class="shuju">
              <el-descriptions :column="3" border>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">装置名称</div>
                  </template>
                  {{ detailRow.deviceName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">设计压力</div>
                  </template>
                  {{ detailRow.designPressure }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">火灾危险等级</div>
                  </template>
                  {{ detailRow.dangerLevel }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">涉及危险化学品</div>
                  </template>
                  {{ detailRow.dangerName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">液位：</div>
                  </template>
                  {{ detailRow.liquid }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">温度：</div>
                  </template>
                  {{ detailRow.temperature }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </Card>
      </template>
    </el-dialog>
    <el-dialog v-model="outerVisible2" width="60%" title="历史数据">
      <template #default>
        <el-form
          :model="hisForm"
          ref="queryRef"
          :inline="true"
          label-width="120px"
          class="searchForm"
          @submit.native.prevent
        >
          <el-row :gutter="0">
            <el-col :span="9">
              <el-form-item label="开始时间">
                <el-date-picker
                  type="datetime"
                  @change="handleHis(null)"
                  v-model="hisForm.start"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  clearable
                  style="width: 100%"
                  @keyup.enter="handleHis(null)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="结束时间">
                <el-date-picker
                  type="datetime"
                  @change="handleHis(null)"
                  v-model="hisForm.end"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  clearable
                  style="width: 100%"
                  @keyup.enter="handleHis(null)"
                />
              </el-form-item>
            </el-col>

            <el-col :span="5" style="text-align: right">
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleHis(null)"
                  >搜索</el-button
                >
                <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <Line ref="history"></Line>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdwarning/immediate.js";
import Card from "./components/oneCard.vue";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import tankImg from "@/assets/images/tank.png";
import Line from "./components/Line.vue";
// import { formatDate } from "@/utils";
const unitList = ref([]);
const { proxy } = getCurrentInstance();

const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["dangerNodeName", "dangerLevel", "param", "bitNumber"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();

const { fetchData, getList, queryParams, form } = useAsyncData({
  APIS: {
    query: APIS.sysDangerPoint,
  },
  formJson,
  table,
  proxy,
});
const detailRow = ref({});
const outerVisible = ref(false);
const outerVisible2 = ref(false);
const rowClick = (row) => {
  outerVisible.value = true;
  APIS.sysDangerCard({
    deviceName: row.deviceName,
  }).then((res) => {
    const data = res.rows[0] || res.data[0];
    detailRow.value = { ...data, ...row };
  });
};
onMounted(() => {});

const history = ref();
const hisForm = ref({});
const hisRow = ref({});

const formatDate = (time) => {
  if (time) {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const h = date.getHours();
    const m = date.getMinutes();
    const s = date.getSeconds();

    return `${year}-${padZero(month)}-${padZero(day)} ${padZero(h)}:${padZero(
      m
    )}:${padZero(s)} `;
  } else {
    return null;
  }
};

//补零函数
function padZero(n) {
  return n < 10 ? "0" + n : n;
}
const handleHis = async (row) => {
  if (row) {
    const dateNow = Date.now();

    hisRow.value = row;
    hisForm.value.start = formatDate(dateNow - 3600 * 1000);
    hisForm.value.end = formatDate(dateNow);
  }
  outerVisible2.value = true;
  hisForm.value.databaseName = hisRow.value.bitNumber;
  APIS.getHistoryData({
    ...hisForm.value,
  }).then((res) => {
    let list = res.data;
    history.value.setData({
      data: [
        {
          name: hisRow.value.param,
          type: "line",
          data: list.map((item) => {
            return item.dataValue;
          }),
          sommth: true,
        },
      ],
      yAxis: list.map((item) => {
        return item.createTime;
      }),
      title: "历史数据",
    });
  });
};

const rowClassName = ({ row, rowIndex }) => {
  if (Number(row.av) <= Number(row.playItLow)) {
    return "yellow";
  } else if (
    Number(row.av) <= Number(row.lowQuota) &&
    Number(row.av) > Number(row.playItLow)
  ) {
    return "lightyellow";
  } else if (
    Number(row.av) >= Number(row.highQuota) &&
    Number(row.av <= row.highAndMighty)
  ) {
    return "red";
  } else if (Number(row.av) > Number(row.highAndMighty)) {
    return "deepred";
  }
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
.card__body {
  display: flex;
  .shuju {
    position: relative;
    flex: 1;

    .list {
      display: flex;
      .label {
        width: 60px;
        font-weight: 600;
        line-height: 20px;
        margin-right: 20px;
      }
      .value {
        line-height: 20px;
      }
    }
  }
}
.tank {
  position: relative;
  width: 160px;
  height: 240px;
  .img {
    width: 130px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .jdt {
    position: absolute;
    top: -22px;
    left: 10px;
  }
}
</style>
